<template>
  <div>
    <div class="user-info">
      <div
        class="user-info-left"
        @click="getUserProfile"
      >
        <avatar
          :src="userinfo.avatar || assets.avatar"
          size="large"
        />
        <div class="user-info-nickname">{{userinfo.nickname}}</div>
      </div>
      <div
        class="user-info-right"
        @click="pushNativelink('/pages/userauth/main')"
      >
        <van-tag
          v-if="userinfo.memberType"
          :color="userinfo.memberType.color"
          :plain="userinfo.memberType.plain"
        >{{userinfo.memberType.text}}</van-tag>
        <van-icon
          name="arrow"
          size="15px"
          color="grey"
        />
      </div>
    </div>
    <div class="user-data">
      <div
        class="user-data-item"
        @click="pushNativelink('/pages/jifendetail/main')"
      >
        <div class="user-data-content">
          {{jifen}}
        </div>
        <div class="user-data-text">积分</div>
      </div>
      <div
        class="user-data-item"
        @click="pushNativelink('/pages/check/main')"
      >
        <div class="user-data-content">
          {{chuqin}}
        </div>
        <div class="user-data-text">出勤</div>
      </div>
      <div class="user-data-item">
        <div class="user-data-content">
          {{level}}
        </div>
        <div class="user-data-text">等级</div>
      </div>
    </div>
  </div>
</template>

<script>

import { loginApi } from '@/api'
import Avatar from '@/components/block/avatar'
export default {
  components: {
    Avatar
  },
  props: {
    userinfo: {
      type: Object,
      default: {
        avatar: '/static/icons/user_default.png',
        nickname: '登录'
      }
    },
    jifen: {
      type: String,
      default: '-'
    },
    chuqin: {
      type: String,
      default: '-'
    },
    level: {
      type: String,
      default: '-'
    }
  },
  data () {
    return {
      assets: {
        avatar: 'https://oss.curva-nord.com/assets/avatar/default.png'
      }
    }
  },
  methods: {
    onLoadData () {

    },
    getUserProfile (e) {
      if (!this.userinfo.actived) {
        // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
        // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
        wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            console.log('getUserProfile', res)
            mpvue.setStorageSync('userInfo', res.userInfo)
            this.onLogin(res.userInfo)
          },
          fail: (res) => {
            console.log(res)
            wx.navigateBack({
              delta: 1
            })
          }
        })
      }
    },
    onLogin (data) {
      wx.showLoading({
        title: '加载中'
      })
      console.log('调用登录接口')
      loginApi(data).then(res => {
        mpvue.setStorageSync('mine', res)
        wx.hideLoading()
        // wx.navigateBack({
        //   delta: 1
        // })
        wx.showToast({
          title: '用户登录成功'
        })
        this.$emit('logined', true)
      }).catch(e => {
        wx.hideLoading()
        console.log(e)
      })
    }

  }
}
</script>

<style lang="less">
.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .user-info-left {
    display: flex;
    align-items: center;
    .image-avatar {
      width: 50px;
      height: 50px;
    }
    .user-info-nickname {
      margin: 0px 0px 0px 10px;
      font-size: 16px;
    }
  }

  .user-info-right {
    display: flex;
    align-items: center;
    .user-info-level {
      font-size: 10px;
      color: #ee732f;
      padding: 0px 5px;
      border: 1px solid #ee732f;
    }
    .image-arrow {
      width: 20px;
      height: 20px;
    }
  }
}
.user-data {
  margin: 20px 0px 0px 0px;
  display: flex;
  justify-content: space-between;
  &-item {
    width: 100%;
    line-height: 20px;
    text-align: center;
  }
  &-content {
    font-size: 16px;
    font-weight: 700;
  }
  &-text {
    font-size: 12px;
    color: #666;
  }
}
</style>
